<template>
  <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
    <div v-for="(item, index) in radioList" :key="index" @click="radioClick(item.id)" :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginLeft: (leftNum / 96) + 'rem', cursor: 'pointer' }">
      <div v-if="radioId == item.id" :style="{ width: (16 / 96) + 'rem', height: (16 / 96) + 'rem', background: '#6168FE', border: (2 / 96) + 'rem solid #6168FE', borderRadius: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginRight: (13 / 96) + 'rem' }">
        <div :style="{ width: (6 / 96) + 'rem', height: (6 / 96) + 'rem', background: '#FFFFFF', borderRadius: (100 / 96) + 'rem' }"></div>
      </div>
      <div v-if="radioId != item.id" :style="{ width: (16 / 96) + 'rem', height: (16 / 96) + 'rem', border: (2 / 96) + 'rem solid #CCCCCC', borderRadius: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginRight: (13 / 96) + 'rem' }"></div>
      <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Radio',
    props: {
      radioId: {
        type: Number,
        default() {
          return 1;
        }
      },
      leftNum: {
        type: Number,
        default() {
          return 126;
        }
      },
      radioList: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      radioClick(id) {
        this.$emit("radioClick", id);
      }
    }
  }
</script>

<style scoped>
</style>
